<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-12-20 18:40:40
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-12-24 22:33:29
 * @FilePath: /tuberculosis_screening_display_system/src/views/Statistics.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="p_default full" >
    <Card class="full" padding="unset" ref="domRef">
      <a-table
        :dataSource="dataSource"
        :pagination="false"
        class="table"
        :scroll="scroll"
        ref="tableRef"
      >
        <template #title>
          <h3 class="t_center m_unset" ref="headerRef">
            2023年肺结核综合防治集中攻坚工作进展
          </h3>
        </template>
        <a-table-column
          key="region"
          title="地区"
          data-index="region"
        ></a-table-column>
        <a-table-column key="count" data-index="count">
          <template #title
            ><div class="t_center text_red">应筛查总<br />人数</div></template
          >
          <template #default="{ record }">
            <div class="t_center text_red">{{ record.count }}</div>
          </template>
        </a-table-column>
        <a-table-column class="" key="count" data-index="count">
          <template #title
            ><div class="t_center text_red">实筛查总<br />人数</div></template
          >
          <template #default="{ record }">
            <div class="t_center text_red">{{ record.count }}</div>
          </template>
        </a-table-column>
        <a-table-column key="count" data-index="count">
          <template #title
            ><div class="t_center text_yellow">非重点<br />人群</div></template
          >
          <template #default="{ record }">
            <div class="t_center text_yellow">{{ record.count }}</div>
          </template>
        </a-table-column>
        <a-table-column key="count" data-index="count">
          <template #title
            ><div class="t_center text_yellow">实筛<br />人数</div></template
          >
          <template #default="{ record }">
            <div class="t_center text_yellow">{{ record.count }}</div>
          </template>
        </a-table-column>
        <a-table-column key="count" data-index="count">
          <template #title
            ><div class="t_center text_blue">重点<br />人群</div></template
          >
          <template #default="{ record }">
            <div class="t_center text_blue">{{ record.count }}</div>
          </template>
        </a-table-column>
        <a-table-column key="count" data-index="count">
          <template #title
            ><div class="t_center text_blue">实筛<br />人数</div></template
          >
          <template #default="{ record }">
            <div class="t_center text_blue">{{ record.count }}</div>
          </template>
        </a-table-column>
        <a-table-column key="count" data-index="count">
          <template #title
            ><div class="t_center">学生<br />人数</div></template
          >
        </a-table-column>
        <a-table-column key="count" data-index="count">
          <template #title
            ><div class="t_center">实筛<br />人数</div></template
          >
        </a-table-column>
        <a-table-column key="count" data-index="count">
          <template #title
            ><div class="t_center">寺庙<br />人数</div></template
          >
        </a-table-column>
        <a-table-column key="count" data-index="count">
          <template #title
            ><div class="t_center">实筛<br />人数</div></template
          >
        </a-table-column>
        <a-table-column key="count" data-index="count">
          <template #title
            ><div class="t_center">老年<br />人数</div></template
          >
        </a-table-column>
        <a-table-column key="count" data-index="count">
          <template #title
            ><div class="t_center">实筛<br />人数</div></template
          >
        </a-table-column>
        <a-table-column key="count" data-index="count">
          <template #title
            ><div class="t_center">密接<br />人数</div></template
          >
        </a-table-column>
        <a-table-column key="count" data-index="count">
          <template #title
            ><div class="t_center">实筛<br />人数</div></template
          >
        </a-table-column>
        <a-table-column key="count" data-index="count">
          <template #title
            ><div class="t_center">教职工<br />人数</div></template
          >
        </a-table-column>
        <a-table-column key="count" data-index="count">
          <template #title
            ><div class="t_center">实筛<br />人数</div></template
          >
        </a-table-column>
        <a-table-column key="count" data-index="count">
          <template #title
            ><div class="t_center">糖尿病<br />人数</div></template
          >
        </a-table-column>
        <a-table-column key="count" data-index="count">
          <template #title
            ><div class="t_center">实筛<br />人数</div></template
          >
        </a-table-column>
        <a-table-column key="count" data-index="count">
          <template #title
            ><div class="t_center">既往<br />人数</div></template
          >
        </a-table-column>
        <a-table-column key="count" data-index="count">
          <template #title
            ><div class="t_center">实筛<br />人数</div></template
          >
        </a-table-column>
      </a-table>
    </Card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch, computed } from 'vue';
import Card from '../components/Card';
export default defineComponent({
  name: 'Statistics',
  components: {
    Card,
  },
  setup() {
    const dataSource = [
      {
        region: '北京市',
        count: 32,
      },
      {
        region: '北京市',
        count: 32,
      },
      {
        region: '北京市',
        count: 32,
      },
      {
        region: '北京市',
        count: 32,
      },
      {
        region: '北京市',
        count: 32,
      },
      {
        region: '北京市',
        count: 32,
      },
      {
        region: '北京市',
        count: 32,
      },
      {
        region: '北京市',
        count: 32,
      },
      {
        region: '北京市',
        count: 32,
      },
      {
        region: '北京市',
        count: 32,
      },
      {
        region: '北京市',
        count: 32,
      },
      {
        region: '北京市',
        count: 32,
      },
      {
        region: '北京市',
        count: 32,
      },
      {
        region: '北京市',
        count: 32,
      },
      {
        region: '北京市',
        count: 32,
      },
      {
        region: '北京市',
        count: 32,
      },
      {
        region: '北京市',
        count: 32,
      },
      {
        region: '北京市',
        count: 32,
      },
      {
        region: '北京市',
        count: 32,
      },
      {
        region: '北京市',
        count: 32,
      },
      {
        region: '北京市',
        count: 32,
      },
      {
        region: '北京市',
        count: 32,
      },
      {
        region: '北京市',
        count: 32,
      },
      {
        region: '北京市',
        count: 32,
      },
    ];
    const domRef = ref();
    const headerRef = ref();


    const scroll = computed(() => {
  
      if (domRef.value && headerRef.value) {
        return {
          y:
            domRef.value.$el?.offsetHeight - 67 - 76
        };
      }
      return {
        y: 200,
      };
    });
    console.log('scroll', scroll);
    // watch(domRef, dom => {
    //   console.log('dom', domRef, headerRef);
    //   console.log('dom', dom.offsetHeight - headerRef.value.offsetHeight -16*2)
    //   scroll.value = {
    //     y: dom.offsetHeight - headerRef.value?.offsetHeight -16*2,
    //   };
    // });

    return {
      dataSource,
      domRef,
      headerRef,
      scroll,

    };
  },
});
</script>

<style lang="scss" scoped>
.table {
  :deep(.ant-table) {
    background: unset !important;
    color: #fff;
  }
  :deep(.ant-table-header) {
    background-color: #1f3150;
  }
  :deep(.ant-table-cell) {
    background: unset !important;
    color: #fff;
    border: unset !important;
    &::before{
      display: block;
      left: 0;
    }
  }
  :deep(.ant-table-cell:first-child) {
    &::before{
      display: none;
    }
  }
  :deep(.ant-table-cell-scrollbar) {
    display: none;
  }
 
  :deep(.ant-table-tbody) {
    border: unset !important;
  }
  :deep(.ant-table-row:nth-child(even)) {
    background: #283b5d;
  }
  :deep(.ant-table-row:nth-child(odd)) {
    background: #2f4770;
  }

  .text_red {
    color: red !important;
  }
  .text_yellow {
    color: yellow;
  }
  .text_blue {
    color: blue;
  }
}
</style>

